<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="nav-title">我的积分</view>
				<view class="nav-right">
					<!-- <text class="more-icon">⋯</text>
					<text class="dash-icon">—</text>
					<text class="target-icon">◎</text> -->
				</view>
			</view>
		</view>

		<!-- 积分统计区域 -->
		<view class="points-summary">
			<view class="summary-card">
				<text class="summary-label">当前积分</text>
				<text class="summary-value">0</text>
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-value">0</text>
						<text class="stat-label">累计积分</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">0</text>
						<text class="stat-label">累计消费</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">0</text>
						<text class="stat-label">今日获得</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态区域 -->
		<view class="empty-state">
			<view class="empty-icon">
				<text class="icon-text">📄</text>
				<text class="icon-magnifier">🔍</text>
				<text class="icon-plus">+</text>
				<text class="icon-minus">-</text>
			</view>
			<text class="empty-text">暂无记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pointsData: {
					currentPoints: 0,
					totalPoints: 0,
					totalConsumption: 0,
					todayEarned: 0
				}
			}
		},
		onLoad() {
			this.getPointsData()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			// 获取积分数据
			async getPointsData() {
				try {
					// 这里可以调用API获取真实数据
					// const response = await this.$api.getPointsInfo()
					// this.pointsData = response.data
					
					// 模拟数据
					this.pointsData = {
						currentPoints: 0,
						totalPoints: 0,
						totalConsumption: 0,
						todayEarned: 0
					}
				} catch (error) {
					console.error('获取积分数据失败:', error)
				}
			}
		}
	}
</script>

<style lang="scss">
.container {
	background: #f5f5f5;
	min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	position: relative;
}

.status-bar {
	height: calc(var(--status-bar-height, 0) + 20rpx);
	background: transparent;
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
}

.nav-left, .nav-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.back-icon {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
}

.nav-title {
	font-size: 36rpx;
	font-weight: 700;
	color: white;
}

.nav-right {
	gap: 15rpx;
}

.more-icon, .dash-icon, .target-icon {
	font-size: 32rpx;
	color: white;
}

/* 积分统计区域 */
.points-summary {
	margin: 30rpx;
}

.summary-card {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	border-radius: 20rpx;
	padding: 40rpx 35rpx;
	box-shadow: 0 8rpx 25rpx rgba(26, 26, 46, 0.3);
	color: white;
	text-align: center;
}

.summary-label {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 20rpx;
	display: block;
}

.summary-value {
	font-size: 80rpx;
	font-weight: 700;
	margin-bottom: 40rpx;
	display: block;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.stats-row {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-value {
	font-size: 36rpx;
	font-weight: 600;
	display: block;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

/* 空状态区域 */
.empty-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 60rpx;
	background: #f5f5f5;
}

.empty-icon {
	position: relative;
	margin-bottom: 40rpx;
}

.icon-text {
	font-size: 120rpx;
	color: #ccc;
	display: block;
}

.icon-magnifier {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	font-size: 40rpx;
	color: #999;
}

.icon-plus {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	font-size: 24rpx;
	color: #999;
	font-weight: bold;
}

.icon-minus {
	position: absolute;
	bottom: 10rpx;
	right: 10rpx;
	font-size: 24rpx;
	color: #999;
	font-weight: bold;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	font-weight: 500;
}
</style>
